<% extends "common/msui.html" %>
<% block title %>订单列表<% endblock %>
<% block body %>
<div class="page" id="search" ms-controller="search">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/mshop/products" >
      <span class="icon icon-left"></span>
    </a>

    <div class="bar product-search-bar">
      <div class="searchbar">
        <div class="search-input">
          <label class="icon icon-search" for="search"></label>
          <input type="search" placeholder='请输入关键字...' ms-duplex='word' />
        </div>
      </div>
    </div>
  </header>

  <div class="content" >
    <div class='product-search-sort-bar'>
      <ul>
        <li ms-click="sort('name')">
          <div> <span ms-class="product-color-black:search_word != 'name'">名称</span><span ms-visible="search_word == 'name' && search_direction == 'desc' ">⇡</span> <span ms-visible="search_word == 'name' && search_direction == 'asc' ">⇣</span> </div>
        </li>
        <li ms-click="sort('price')">
          <div> <span ms-class="product-color-black:search_word != 'price'">价格</span><span ms-visible="search_word == 'price' && search_direction == 'desc' ">⇡</span> <span ms-visible="search_word == 'price' && search_direction == 'asc' ">⇣</span> </div>
        </li>
        <li ms-click="sort('popularity')">
          <div> <span ms-class="product-color-black:search_word != 'popularity'">人气</span><span ms-visible="search_word == 'popularity' && search_direction == 'desc' ">⇡</span> <span ms-visible="search_word == 'popularity' && search_direction == 'asc' ">⇣</span> </div>
        </li>
      </ul>
    </div>

    <div class="card" ms-repeat='products'>
      <div class="card-content">
        <div class="list-block media-list">
          <ul>
            <a ms-attr-href="/mshop/product?product_id={{el.id}}">
               <li class="item-content">
                <div class="item-media">
                    <img width="80" height="80" ms-attr-src="/website/image/product.template/{{el.id}}/image" />
                </div>
                <div class="item-inner product-list-desc">
                  <div class="item-title-row">
                    <div class="item-title">{{el.name}}</div>
                    <div class='item-after' style='color:red'>￥{{el.price}}</div>
                  </div>
                  <div class="item-subtitle">{{el.description_sale}}</div>
                </div>
              </li>
            </a>
          </ul>
        </div>
      </div>
    </div>

  </div>

  <footer>
    <nav class="bar bar-tab index-footer">
      <a class="tab-item" href="/mshop?tab=index">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
      </a>
      <a class="tab-item" href="/mshop?tab=cart">
        <span class="icon icon-cart"></span>
        <span class="tab-label">购物车</span>
      </a>
      <a class="tab-item" href="/mshop?tab=my">
        <span class="icon icon-me"></span>
        <span class="tab-label">我的</span>
      </a>
    </nav>
  </footer>

  <script type="application/javascript" >
    $(function() {

        var word = '${word | safe}';

        $('div.product-search-bar input').keydown(function(e) {
            if (e.keyCode === 13 && search_vm.word) {
                sync_content();
            }
        });

        $('div.product-search-bar .icon-search').click(function(e) {
            if (search_vm.word) {
                sync_content();
            };
        });

        var sync_content = function() {
            $.ajax({
                url: '/mshop/search/get_list',
                data: {
                    word: search_vm.word
                },
                type: 'post',
                success: function(e) {
                    search_vm.products = JSON.parse(e);
                    sort_product();
                },
                async: true,
            });
        };

        var sort_product = function() {
          if (search_vm.search_word && search_vm.search_direction) {
            search_vm.products.sort(function(left_value, right_value) {
              var res = left_value[search_vm.search_word] > right_value[search_vm.search_word]
              res = search_vm.search_direction === 'desc'? res : !res;

              // @正翔 变态的实现，必须选择返回一个整型
              return res? 1 : -1;
            });
          }
        };

        var search_vm = avalon.define({
            $id: 'search',
            products: [],
            word: word,
            search_word: 'name',
            search_direction: 'asc',
            sort: function(name) {
                if (search_vm.search_word === name) {
                    search_vm.search_direction = search_vm.search_direction === 'desc' ? 'asc' : 'desc';
                } else {
                    search_vm.search_word = name;
                    search_vm.search_direction = 'desc';
                };

                sort_product();
            },
        });

        sync_content()
        avalon.scan();
    });

  </script>

<% endblock %>
</div>